import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'dva';
import { Table,Input ,Button,Modal ,Row ,Col,Transfer, Switch,message,Popconfirm,Divider,Pagination,Select } from 'antd';
import styles from './index.less';
const Option = Select.Option;

const Pages = ({ point, dispatch, loading }) => {
    const columns = [
        {
            title: '路线编号',
            dataIndex: 'route_name',
        },
        {
            title: '路线名称',
            dataIndex: 'route_num',
        },
        {
            title: '负责⼈',
            dataIndex: 'duty_name',
        },
        {
            title: '路线巡检点',
            dataIndex: 'point_id',
            render:(text,record) => <a onClick={()=>{
                localStorage.setItem('hrefid',record.id);
                dispatch({type:'app/goToPath',payload:'checkpoint'});
            }}>{text && text.map(item=>{
                    return <div key={item.id}>*{item.name}</div>;
                })}</a>,
        },
        {
            title: '操作',
            dataIndex: 'option',
            render: (text,record) =><div>
                <Popconfirm title="确定移除?" onCancel={()=>{}} onConfirm={
                    ()=> dispatch({type:"point/deletePoint",payload:{id:record.id}})
                } okText="是" cancelText="否">
                    <a style={{color:"red"}}>删除</a>
                </Popconfirm>
                <Divider type="vertical" />
                <a onClick={()=>{
                    dispatch({type:"point/inputOut",payload:{view:true,record:record}});
                    dispatch({type:"point/newPost"});
                }}>修改</a>
            </div>,
        },
    ];
    return(
        <div className={styles.container}>
            <PagesGET dispatch={dispatch} {...point} loading={loading.global}/>
            <Table
                columns={columns}
                size="small"
                pagination={false}
                loading={loading.global}
                rowKey={id =>id.id}
                dataSource={point.getPointData || null} />
            <Pagination current={point.pages} showTotal={total => `共计 ${total} 条`}
                style={{float: 'right', margin: 10}} size="small" total={point.total}
                onChange={pages => { !loading.global && dispatch({type:'point/inputOut',payload:{pages:pages}});}}/>
        </div>
    );
};


class PagesGET extends React.Component {


    constructor (props) {
        super(props);
        this.state = {
            route_name: "",
            route_num :"",
            duty_name:"",
            FZRADD:'',
            XJDADD:[],
        };
    }

    // 实例化生命周期函数1
    componentWillMount () {
        //判断是否登录
        this.props.dispatch({type:"point/getPoint",payload:{
            route_name: localStorage.getItem('hrefid')?localStorage.getItem('hrefid'):"",
            route_num :"",
            duty_name:"",
            pageNumber :1,
            pageSize :10,
        }});
    }


    render (){

        let {dispatch,pages,view,record,XJD,FZR,loading } = this.props;
        XJD && XJD.map(item=>{ item.key = item.id; });
        return (
            <div className={styles.containerit}>
                <Input value={this.state.route_name } placeholder="巡检路线名称" style={{margin:10,width:256}} onChange={e=>this.setState({route_name:e.target.value})}/>
                {/*<Input value={this.state.route_num } placeholder="巡检路线编号" style={{margin:10,width:256}} onChange={e=>this.setState({route_num :e.target.value})} />*/}
                <Input value={this.state.duty_name } placeholder="负责人" style={{margin:10,width:256}} onChange={e=>this.setState({duty_name :e.target.value})} />
                <Button type='primary' onClick={()=>{
                    let {route_name,route_num,duty_name} = this.state;
                    this.props.dispatch({type:"point/getPoint",payload:{
                        route_name:route_name,
                        route_num :route_num,
                        duty_name:duty_name,
                        pageNumber :pages,
                        pageSize :10,
                    }});
                }
                }>查询</Button>
                <Button style={{marginLeft:10}} onClick={()=>{
                    this.setState({
                        route_name:'',
                        duty_name:'',
                    });
                }}>重置</Button>
                <Button style={{margin:10}} onClick={()=>{
                    dispatch({type:"point/newPost"});
                    dispatch({type:"point/inputOut",payload:{record:{}}});
                    this.setState({
                        route_nameADD:"",
                        route_numADD:'',
                        duty_nameADD:'',
                        FZRADD:'',
                        XJDADD:[],
                    });
                }}>新增巡检路线</Button>

                <Modal
                    title={record.id?"修改巡检路线":"添加巡检路线"}
                    visible={view}
                    width={700}
                    confirmLoading={loading}
                    onOk={()=>{
                        let {route_nameADD,route_numADD,duty_nameADD,FZRADD,XJDADD} = this.state;
                        if(route_nameADD && route_numADD && FZRADD){
                            let body ={
                                route_name: route_nameADD,
                                route_num:route_numADD,
                                remark:duty_nameADD,
                                point_id:XJDADD,
                                duty_name:FZRADD,
                            };
                            if(record.id){
                                body.id = record.id;
                            }
                            dispatch({type:record.id?"point/putPoint":"point/postPoint",payload:body});
                        }else{
                            message.error('请填写完整！');
                        }
                    }}
                    onCancel={()=>{
                        dispatch({type:"point/inputOut",payload:{view:false,record:{}}});
                    }}>
                    <Row style={{marginLeft:50}}>
                        <Col span={24}>
                            <span><span style={{color:'red'}}>*</span>巡检路线名称:</span>
                            <Input style={{width: 400, marginBottom: 10, marginTop: -4,marginLeft:10}}
                                onChange={e => this.setState({route_nameADD: e.target.value})}
                                value={this.state.route_nameADD}
                                placeholder="名称"/>
                        </Col>

                        <Col span={24}>
                            <span><span style={{color:'red'}}>*</span>巡检路线编号:</span>
                            <Input style={{width: 400, marginBottom: 10, marginTop: -4,marginLeft:10}}
                                onChange={e => this.setState({route_numADD: e.target.value})}
                                value={this.state.route_numADD}
                                placeholder="巡检路线编号"/>
                        </Col>

                        <Col span={24}>
                            <span><span style={{color:'red'}}>*</span>路线备注说明:</span>
                            <Input style={{width: 400, marginBottom: 10, marginTop: -4,marginLeft:10}}
                                onChange={e => this.setState({duty_nameADD: e.target.value})}
                                value={this.state.duty_nameADD}
                                placeholder="备注说明"/>
                        </Col>
                        <Col span={24}>
                            <span><span style={{color:'red'}}>*</span>路线负责人:</span>
                            <Select value={this.state.FZRADD || '请选择'} style={{width: 400, marginBottom: 10, marginTop: -4,marginLeft:24}}
                                // mode="multiple"
                                onChange={value=>{
                                    this.setState({
                                        FZRADD:value,
                                    });
                                }}>
                                {FZR && FZR.map(item =>{
                                    return <Option key={item.id} value={item.id}>{item.name}</Option>;
                                })}
                            </Select>
                        </Col>
                        <Col style={{display:"flex"}} span={24}>
                            <span><span style={{color:'red'}}>*</span>巡检点选择:</span>
                            <Transfer
                                dataSource={XJD || []}
                                style={{marginLeft:24}}
                                titles={['巡检点', '已选中巡检点']}
                                targetKeys={this.state.XJDADD}
                                onChange={(nextTargetKeys)=>{
                                    this.setState({
                                        XJDADD:nextTargetKeys,
                                    });
                                }}
                                render={item => item.name}
                            />
                        </Col>
                    </Row>
                </Modal>
            </div>
        );
    }
    componentWillReceiveProps (nextProps) {
        if (nextProps.record.id !== this.props.record.id) {
            let {route_name,route_num,duty_name,point_id,remark} = nextProps.record;
            let XJDADD= [];
            point_id && point_id.map(item=>{
                XJDADD.push(item.id);
            });
            this.setState({
                route_nameADD: route_name,
                route_numADD:route_num,
                duty_nameADD:remark,
                XJDADD:XJDADD,
                FZRADD:duty_name,
            });
        }
        if(nextProps.pages !== this.props.pages){
            let {route_name,route_num,duty_name} = this.state;
            this.props.dispatch({type:"point/getPoint",payload:{
                route_name: route_name,
                route_num :route_num,
                duty_name:duty_name,
                pageNumber :nextProps.pages ==0?1:nextProps.pages,
                pageSize :10,
            }});
        }
    }
}

Pages.propTypes = {
    point: PropTypes.object,
    loading: PropTypes.object,
    dispatch: PropTypes.func,
};

export default connect(({ point, loading }) => ({ point, loading }))(Pages);
